<template>
	<view class="member-container">
		<!-- 用户信息区域 -->
		<view v-if="isLogin == false" @click="showLoginAct" class="user-info-section">
			<view class="user-info-content">
				<view class="avatar-section">
					<image class="avatar" :src="statics.defaultFace"></image>
				</view>
				<view class="user-details">
					<view class="login-text">{{$t('member.notLogin')}}</view>
					<view class="login-hint">{{$t('member.clickLogin')}}</view>
				</view>
			</view>
			<text class="arrow-icon iconfont iconright"></text>	
		</view>
		<view v-else class="user-info-section">
			<view class="user-info-content" @click="opsets">
				<view class="avatar-section">
					<image class="avatar" :src="avatar"></image>
					<image v-if="userinfo.group_id>1" class="vip-badge" :src="statics.vipLevelImg[0]"></image>
				</view>
				<view class="user-details">
					<view class="username">{{ userinfo.nickname || '' }}</view>
					<view class="user-id">ID: {{ userinfo.user_id || '' }}</view>
				</view>
			</view>
			<view class="settings-btn" @click="opset">
				<image mode="aspectFit" :src="staticUrl + 'sz.png?v=1'"></image>
			</view>
		</view>

		<!-- 会员开通横幅 -->
		<view class="membership-banner">
			<view class="banner-content">
				<view class="banner-header">
					<text class="banner-title">{{$t('member.openMembership')}}</text>
					<text class="banner-subtitle">{{$t('member.exclusiveBenefits')}}</text>
				</view>
				<view class="benefits-grid">
					<view class="benefit-item" v-for="(item,index) in benefits" :key="index">
						<view class="benefit-icon">{{item.icon}}</view>
						<text class="benefit-text">{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="activate-btn" @click="activateMembership">
				{{$t('member.activate')}}
				<text class="iconfont iconright"></text>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-section">
			<view class="menu-item" v-for="(item,index) in getMenus" :key="index" @click="memberLinkTo" :data-index="index">
				<view class="menu-content">
					<image class="menu-icon" :src="item.icon"></image>
					<text class="menu-text">{{item.name}}</text>
					<text v-if="item.name === $t('member.myWallet') && userinfo.money" class="wallet-balance">{{userinfo.money}}</text>
					<text v-if="item.name === $t('member.welfareCenter')" class="welfare-badge">New</text>
				</view>
				<text class="menu-arrow iconfont iconright"></text>
			</view>
		</view>
		
		<com-copyright></com-copyright>
		
		<dialog-birthday v-if="showBirthday" @closed="showBirthday = false"></dialog-birthday>
		<dialog-login v-if="showLogin" @loginYes="loginYes" @closed="showLogin = false"></dialog-login>
		<dialog-qrcode v-if="showQrcode" @closed="showQrcode = false"></dialog-qrcode>
	</view>
</template>

<script>
	import { pageTitleMixin, languageMixin } from '@/common/mixins.js';
	
	export default{
		mixins: [pageTitleMixin, languageMixin],
		data(){
			return {
				isLogin:false,
				showLogin:false,
				isBirthday:true,
				showBirthday:false,
				showQrcode:false,
				avatar:'',
				userinfo:[],
				banners:[],
				site:{},
				vipLevel:0,
				iskq:0,
				uid:0,
				staticUrl:this.$config.staticUrl,
				benefits: [
					{icon: '▶', text: this.$t('member.freeAllEpisodes')},
					{icon: 'HD', text: this.$t('member.hdQuality')},
					{icon: '↓', text: this.$t('member.offlineDownload')},
					{icon: '★', text: this.$t('member.dailyPoints')}
				],
				memberMenus:[
					{name:'观看历史',type:'link',model:'',link:'/pages/client/tuan/zjgk',icon:this.$config.staticUrl + 'vipcard_icon_my_card@2x.png',show:1},
					{name:'立即充值',type:'link',model:'',link:'/pages/client/vipcard/recharge',icon:this.$config.staticUrl + 'vipcard_icon_my_order@2x.png',show:1},
					{name:'我的钱包',type:'link',model:'',link:'/pages/client/vipcard/moneylog',icon:this.$config.staticUrl + 'vipcard_love.png?v=1',show:1},
					{name:'福利中心',type:'link',model:'',link:'/pages/client/member/address',icon:this.$config.staticUrl + 'vipcard_icon_my_address@2x.png',show:1},
					//{name:'离线下载',type:'link',model:'',link:'/pages/client/shop',icon:this.$config.staticUrl + 'vipcard_icon_my_integral@2x.png',show:1},
	
					{name:'邀请好友',type:'link',model:'',link:'/pages/client/mytuandui',icon:this.$config.staticUrl + 'vipcard_icon_my_invite@2x.png',show:1},
					{name:'设置',type:'link',model:'',link:'/pages/set/set',icon:this.$config.staticUrl + 'vipcard_icon_my_integral@2x.png',show:1},
				],
			}
		},
		computed:{
			getMenus(){
				let arr = new Array;
				for(var a in this.memberMenus){
					if(this.memberMenus[a].name === '福利中心') {
						if(!(this.site && this.site.fuli)) continue;
					}
					
					if(this.memberMenus[a].show == 1 || (this.iskq==1 && this.memberMenus[a].show == 3)){
						let menuItem = {...this.memberMenus[a]};
						switch(menuItem.name) {
							case '观看历史': menuItem.name = this.$t('member.watchHistory'); break;
							case '立即充值': menuItem.name = this.$t('member.rechargeNow'); break;
							case '我的钱包': menuItem.name = this.$t('member.myWallet'); break;
							case '福利中心': menuItem.name = this.$t('member.welfareCenter'); break;
							case '我的推广': menuItem.name = this.$t('member.myPromotion'); break;
							//case '离线下载': menuItem.name = this.$t('member.offlineDownloadMenu'); break;
							case '在线客服': menuItem.name = this.$t('member.gifts'); break;
							case '邀请好友': menuItem.name = this.$t('member.onlineService'); break;
							case '设置': menuItem.name = this.$t('member.settings'); break;
						}
						arr.push(menuItem);
					}
				}
				return arr;
			}
		},
		onLoad(){
			if(uni.getStorageSync("userinfo")){
				 this.uid=uni.getStorageSync("userinfo").id
			}
		},
		onShow() {
			if(uni.getStorageSync("userinfo").token){
				this.isLogin =true; 
				this.ongrzlTap();
			}else{
				this.isLogin =false; 
			}
			this.banners = uni.getStorageSync("config").banner
			this.site = uni.getStorageSync("config").site
			this.getList();
		},
		methods:{
			activateMembership(){
				uni.navigateTo({
					url:'/pages/client/vipcard/index'
				})
			},
			opset(){
				uni.navigateTo({
					url:'/pages/set/set'
				})
			},
			opsets(){
				uni.navigateTo({
					url:'/pages/set/grzl/grzl'
				})
			},
			async ongrzlTap(){
				let data = {};
				data.token = uni.getStorageSync("userinfo").token;
				data.uid = uni.getStorageSync("userinfo").id;
				uni.request({
					url: this.configs.webUrl+'/api/user/index',
					data: data,
					success: res =>{
						if(res.data.code==1){
							let ionfo=res.data.data
							ionfo.isLogin=true
							this.userinfo=ionfo
							this.iskq=this.userinfo.config.iskq
							uni.setStorage({key: 'userinfo', data: res.data.data})
							
							if(res.data.data.avatar){
								var str = res.data.data.avatar;
								if(str.indexOf("data:image") != -1){
									this.avatar='';
								}else{
									if(str.indexOf("http") != -1){
										this.avatar=res.data.data.avatar;
									}else{
										this.avatar=this.configs.imgUrl+res.data.data.avatar;
									}
								}
							}else{
								this.avatar='';
							}
							uni.setStorage({key: 'avatar', data: this.avatar})
						}else{
							uni.showToast({ title: res.data.msg,icon:"none" });
						}
					}
				});		
			},
			getList() {
				let data = {};
				var limit=15;
				data.limit=limit
				data.ishot=2
				uni.request({
					url: this.configs.webUrl+'/api/video/lists',
					data: data,
					success: data => {
						uni.setStorage({key: 'config', data: data.data.config})
						if(uni.getStorageSync("config").iskq){
							this.iskq=uni.getStorageSync("config").iskq;
						}
					}
				});
			},
			memberLinkTo(e){
				let index = parseInt(e.currentTarget.dataset.index);
				if(this.isLogin == false && this.getMenus[index].model != 'integral'){
					this.showLogin = true;
				}else if(this.getMenus[index].link != ''){
					uni.navigateTo({
						url:this.getMenus[index].link 
					})
				}
			},
			showLoginAct(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			loginYes(){},
			outlogin(){
				uni.showModal({
				    content: this.$t('member.logoutConfirm'),
				    showCancel: true,
				    success: (e)=>{
				    	if(e.confirm){
				    		uni.clearStorageSync();
				    		setTimeout(()=>{
				    			this.isLogin =false; 
								this.userinfo.isLogin=false
				    		}, 200)
				    	}
				    }
				});
			}
		}
	}
</script>

<style lang="scss">
.member-container {
  	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	min-height: 100vh;
	color: #fff;
	padding: 30upx 24upx;
	padding-bottom: env(safe-area-inset-bottom);
}

/* 用户信息区域 */
.user-info-section {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30upx 0;
	margin-bottom: 40upx;
}

.user-info-content {
	display: flex;
	align-items: center;
	flex: 1;
}

.avatar-section {
	position: relative;
	margin-right: 24upx;
}

.avatar {
	width: 120upx;
	height: 120upx;
	border-radius: 50%;
	border: 2px solid rgba(255, 214, 0, 0.3);
	background: #2a2a2a;
}

.vip-badge {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 36upx;
	height: 36upx;
	border-radius: 50%;
	border: 2px solid #1a1a1a;
}

.user-details {
	flex: 1;
}

.username, .login-text {
	font-size: 36upx;
	font-weight: 600;
	color: #fff;
	margin-bottom: 8upx;
}

.user-id, .login-hint {
	font-size: 24upx;
	color: #888;
}

.arrow-icon {
	font-size: 28upx;
	color: #888;
	margin-left: 20upx;
}

.settings-btn {
	width: 80upx;
	height: 80upx;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 20upx;

	image {
		width: 36upx;
		height: 36upx;
	}
}

/* 会员卡片 */
.membership-banner {
	position: relative;
	background: linear-gradient(105deg, #C827F5 50%, #7327F5 50%);
	border-radius: 20upx;
	padding: 30upx;
	margin-bottom: 40upx;
	overflow: hidden;
	box-shadow:
		inset 0 2upx 6upx rgba(255, 255, 255, 0.1),
		0 10upx 20upx rgba(0, 0, 0, 0.4),
		0 0 0 1px rgba(255, 215, 0, 0.2);

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		background-image:
			radial-gradient(circle at 25% 30%, rgba(255, 215, 0, 0.2) 1px, transparent 1px),
			radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
		background-size: 22px 22px;
		opacity: 0.5;
		pointer-events: none;
	}

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 20upx;
		border: 1px solid rgba(255, 215, 0, 0.3);
		box-shadow: inset 0 0 10upx rgba(255, 255, 255, 0.1);
		pointer-events: none;
	}
}

.banner-header {
	margin-bottom: 16upx;
	position: relative;
	z-index: 2;
}

.banner-title {
	font-size: 34upx;
	font-weight: 700;
	color: #000;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
	margin-bottom: 8upx;
}

.banner-subtitle {
	font-size: 24upx;
	color: rgba(0, 0, 0, 0.75);
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
	margin-bottom: 20upx;
}

.benefits-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20upx;
	position: relative;
	z-index: 2;
	margin-bottom: 20upx;
}

.benefit-item {
	display: flex;
	align-items: center;
}

.benefit-icon {
	width: 36upx;
	height: 36upx;
	background: rgba(0, 0, 0, 0.15);
	border-radius: 8upx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20upx;
	color: #000;
	margin-right: 12upx;
	font-weight: bold;
}

.benefit-text {
	font-size: 24upx;
	color: #000;
	font-weight: 500;
}

/* 缩小的激活按钮 */
.activate-btn {
	position: relative;
	z-index: 2;
	background: rgba(0, 0, 0, 0.7);
	color: #FFD600;
	padding: 10upx 20upx;
	border-radius: 24upx;
	font-size: 26upx;
	font-weight: 600;
	border: 1px solid rgba(255, 215, 0, 0.5);
	backdrop-filter: blur(5px);
	box-shadow:
		0 2upx 4upx rgba(0, 0, 0, 0.3),
		inset 0 1px 1px rgba(255, 255, 255, 0.1);
	min-width: 140upx;
	text-align: center;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		background-image:
			radial-gradient(circle at 60% 40%, rgba(255, 215, 0, 0.15) 1px, transparent 1px);
		background-size: 15px 15px;
		border-radius: 24upx;
		pointer-events: none;
	}

	.iconfont {
		display: none;
	}
}

/* 功能菜单 */
.menu-section {
	background: #2a2a2a;
	border-radius: 20upx;
	overflow: hidden;
	margin-bottom: 40upx;
}

.menu-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32upx 30upx;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	transition: all 0.3s;

	&:active {
		background: rgba(255, 255, 255, 0.05);
	}

	&:last-child {
		border-bottom: none;
	}
}

.menu-content {
	display: flex;
	align-items: center;
	flex: 1;
}

.menu-icon {
	width: 48upx;
	height: 48upx;
	margin-right: 24upx;
}

.menu-text {
	font-size: 30upx;
	color: #fff;
	font-weight: 500;
}

.wallet-balance {
	font-size: 26upx;
	color: #FFD600;
	font-weight: 600;
	margin-left: 16upx;
}

.welfare-badge {
	font-size: 22upx;
	color: #FF4444;
	font-weight: 600;
	margin-left: 16upx;
	background: rgba(255, 68, 68, 0.1);
	padding: 4upx 12upx;
	border-radius: 20upx;
}

.menu-arrow {
	font-size: 28upx;
	color: #888;
	margin-left: 20upx;
}

.menu-item {
	background: rgba(15, 23, 42, 0.5);
}
</style>
